<template>
  <div class="at-box">
    <div class="at-top">
      <span>通知</span>
    </div>

    <div class="at-box" v-for="notli in notices" :key="notli.id">
      <div class="private-img">
        <img :src="notli.notice.user.avatarUrl" alt="" />
      </div>

      <div class="private-span">
        <div class="private-add">
          <span class="span1"
            >{{ notli.notice.user.nickname }}
            <span class="span2">{{notli.notice.generalNotice.actionDesc}}</span>
          </span>
          <span>{{moment(notli.time).format('MM月DD日 HH:mm')}}</span>
        </div>
        <span>{{notli.notice.generalNotice.content}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import moment from "moment";
export default {
  data() {
    return {
      // 偏移量
      offset: 0,
      notices: [],
      moment

    };
  },
  mounted() {
    this.getmsgnotices();
  },
  methods: {
    // 获取通知
    async getmsgnotices() {
      const data = {
        cookie: this.cookie,
        limit: 10,
        offset: this.offset,
      };
      const result = await this.$API.reqmsgnotices(data);
      console.log(result);
      if (result.code == 200) {
        // this.notices = result.notices || [];
        const it = result.notices;

        //  it.map((item,index)=>{
        //   item.notice = JSON.parse(item.notice);
        //   return item;
        //  });

        it.forEach(item => {
            // console.log(item)
            item.notice = JSON.parse(item.notice)
            // notices.push(JSON.parse(item.notice))
        });
        

      // for (let i = 0; i < it.length; i++){
      //   it[i].notice = JSON.parse(it[i].notice);
      // }

        console.log("testMap",it);
        this.notices = it || [];
      } else {
        this.$msg.error("获取私信失败");
      }
    },
  },
  computed: {
    ...mapState({
      //cookie
      cookie: (state) => {
        return state.User.loginmessage.cookie;
      },
    }),
  },
};
</script>

<style lang="less" scoped>
.at-box {
  width: 715px;
  margin: 0px auto;
  .at-top {
    border-bottom: 3px solid red;
    margin-top: 30px;
    span {
      display: block;
      margin-bottom: 5px;
    }
  }
  .at-box {
    height: 83px;
    display: flex;
    align-items: center;
    .private-img {
      img {
        width: 50px;
        height: 50px;
      }
    }
    .private-span {
      padding: 10px;
      font-size: 12px;
      color: #999;
      width: 100%;

      .private-add {
        display: flex;
        justify-content: space-between;
        margin-top: -14x;
        .span1 {
          font-size: 16px;
          display: block;
          color: #000;
          font-weight: bold;
          margin-bottom: 8px;
          .span2 {
            font-size: 12px;
            color: #999;
            font-weight: 300;
          }
        }
      }
    }
  }
}
</style>
